Ryan's Blog

切换主题

React 中的类组件与 Hooks ​

标签
React
类组件
Hooks
TypeScript
字数
669 字
阅读时间
4 分钟

在 React 的发展历程中，组件的编写方式经历了显著的演变。从最初的类组件到现代的 Hooks，让我们一同探讨这两者的差异、优缺点，以及如何在 TypeScript 中更好地使用它们。

类组件的时代 ​

在引入 Hooks 之前，React 开发者主要依赖类组件来管理状态和生命周期。

类组件的特点 ​

  • 继承：类组件需要继承 React.Component。
  • 状态管理：通过 this.state 初始化状态，并用 this.setState 更新状态。
  • 生命周期方法：使用 componentDidMount、componentDidUpdate 等来管理组件的生命周期。

示例代码 ​

jsx
import React from 'react';

class TodoListClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: [],
      input: '',
    };
  }

  handleInputChange = (event) => {
    this.setState({ input: event.target.value });
  };

  addTodo = () => {
    this.setState((prevState) => ({
      todos: [...prevState.todos, prevState.input],
      input: '',
    }));
  };

  render() {
    return (
      <div>
        <h1>Todo List</h1>
        <input
          type="text"
          value={this.state.input}
          onChange={this.handleInputChange}
        />
        <button onClick={this.addTodo}>Add Todo</button>
        <ul>
          {this.state.todos.map((todo, index) => (
            <li key={index}>{todo}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default TodoListClass;

Hooks 的引入 ​

React 16.8 引入了 Hooks，开启了函数组件的新篇章。Hooks 使函数组件可以管理状态和副作用，简化了代码结构。

Hooks 的好处 ​

  1. 简洁性：减少样板代码，使组件更易于阅读和维护。
  2. 逻辑复用：自定义 Hooks 可以在多个组件间共享逻辑。
  3. 避免复杂的生命周期方法：用 useEffect 统一管理副作用。

示例代码 ​

jsx
import React, { useState } from 'react';

function TodoListHooks() {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState('');

  const handleInputChange = (event) => {
    setInput(event.target.value);
  };

  const addTodo = () => {
    if (input.trim()) {
      setTodos([...todos, input]);
      setInput('');
    }
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={input}
        onChange={handleInputChange}
      />
      <button onClick={addTodo}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default TodoListHooks;

在 TypeScript 中使用 Hooks ​

在 TypeScript 中，使用 React.FC 可以为函数组件提供类型检查和自动补全。

TypeScript 示例 ​

tsx
import React, { useState } from 'react';

interface TodoListProps {
  initialTodos?: string[];
}

const TodoListHooks: React.FC<TodoListProps> = ({ initialTodos = [] }) => {
  const [todos, setTodos] = useState<string[]>(initialTodos);
  const [input, setInput] = useState('');

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setInput(event.target.value);
  };

  const addTodo = () => {
    if (input.trim()) {
      setTodos([...todos, input]);
      setInput('');
    }
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        type="text"
        value={input}
        onChange={handleInputChange}
      />
      <button onClick={addTodo}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
};

export default TodoListHooks;

从类组件到 Hooks 的过渡，使得 React 开发变得更加高效和灵活。虽然类组件仍然有效，但 Hooks 提供了一种更现代的方式来构建功能强大的组件。

贡献者

The avatar of contributor named as Ryan.G Ryan.G

页面历史